<!-- 问卷组件 -->
<!-- todo将各个题型封装 -->
<script setup lang="ts">
// import flag from '../../hooks/changePhoneFlag'
import { defineProps, onMounted, reactive, ref, watch, computed } from 'vue'
import { useRouter } from 'vue-router'
import Cookies from 'js-Cookie'
import cascader from '../cascader/index.vue'
import { questionnaire } from '../../utils/questionnaire/questionnaire'
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import axios from 'axios'
import img from '../../../static/img/wj/tizi.jpg'
import { ElMessage, ElMessageBox } from 'element-plus'
import { invesStudentCreate, invesTeacherCreate } from '../../http/api'
const router = useRouter()
const props = defineProps<{
    id: string,
}>()

const data = ref('') as any
const valid = ref('') as any
const spliceData = ref({ page: 0, questions: [], startIndex: 0 }) as any

//教师问卷
const ICC17 = reactive({
    ICC17_1: '', ICC17_2: '', ICC17_3: '',
    ICC17_4: "", ICC17_5: "", ICC17_6: "", ICC17_7: "", ICC17_8: ""
})
const PA30 = reactive({
    PA30_1: '', PA30_2: ''
})
const PA25 = reactive({
    PA25_1: '', PA25_2: '', PA25_3: ''
})


watch(ICC17, () => {
    if (props.id === "1") {
        valid.value.ICC17 = ICC17.ICC17_1 + '-' +
            ICC17.ICC17_2 + '-' + ICC17.ICC17_3 + '-' +
            ICC17.ICC17_4 + '-' + ICC17.ICC17_5 + '-' +
            ICC17.ICC17_6 + '-' + ICC17.ICC17_7 + '-' +
            ICC17.ICC17_8
    }
})
watch(PA30, () => {
    if (props.id === "1") {
        valid.value.PA30 = PA30.PA30_1 + '-' + PA30.PA30_2
    }
})
watch(PA25, () => {
    if (props.id === "1") {
        valid.value.PA25 = PA25.PA25_1 + '-' + PA25.PA25_2 + "-" + PA25.PA25_3
    }
})

//获取问卷
//todo 鉴权
onMounted(async () => {
    //await axios.get(`http://aipsy.touchcloud.top/json/${props.id}.json`).then(res => {
    await axios.get(`http://1.14.241.161:3000/public/json/${props.id}.json`).then(res => {
        data.value = res.data
        const questionnaireData = JSON.parse(localStorage.getItem('questionnaireData') as any)
        if (questionnaireData?.id === props.id) {
            ElMessageBox.confirm('上次已完成部分作答，是否继续作答？', '提示', {
                // if you want to disable its autofocus
                // autofocus: false,
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning',
            }).then(() => {
                valid.value = questionnaireData.data

                spliceData.value.page = questionnaireData.page
                spliceData.value.startIndex = questionnaireData.startIndex
                toSpliceData() //分页
            }).catch(() => {
                valid.value = questionnaire(res.data.questions, props.id)
                toSpliceData() //分页
            })

        }
        else {
            valid.value = questionnaire(res.data.questions, props.id)
            toSpliceData() //分页
        }
    })

})
watch(valid as any, () => {
    let questionnaireData = {
        id: props.id,
        startIndex: spliceData.value.startIndex - data.value.pageList[spliceData.value.page - 1],
        page: spliceData.value.page - 1,
        data: { ...valid.value }
    }
    localStorage.setItem('questionnaireData', JSON.stringify(questionnaireData))
}, { deep: true })
//下一页
const toSpliceData = () => {
    if (err()) {
        loading.value = false; // 在验证不通过时也关闭 loading 状态
        return;
    }
    loading.value = true
    spliceData.value.page = spliceData.value.page + 1
    spliceData.value.questions = data.value.questions.slice(spliceData.value.startIndex, spliceData.value.startIndex + data.value.pageList[spliceData.value.page - 1])
    spliceData.value.startIndex += data.value.pageList[spliceData.value.page - 1]
    window.scrollTo({ top: 0 })
    loading.value = false

}


//上一页
const goBack = () => {
    spliceData.value.page = spliceData.value.page - 1
    spliceData.value.startIndex = spliceData.value.startIndex - data.value.pageList[spliceData.value.page]
    spliceData.value.questions = data.value.questions.slice(spliceData.value.startIndex - data.value.pageList[spliceData.value.page - 1], spliceData.value.startIndex)
}
//错误定位

//todo 排除非必选
const err = () => {
    for (const key of spliceData.value.questions) {   //检测当前页面是否填完数据
        if (key.type === 6)
            console.log(typeof valid.value[key.field])
        switch (key.type) {
            case 6:
                if (typeof valid.value[key.field] === 'object') {
                    scrollToErr(key.field)
                    return true
                }
                break;
            case 4:
                for (const rowKey in key.rowTitle) {
                    if (props.id === '11' || props.id === '13') {
                        if (key.filterLength) {
                            if (valid.value[`${key.field}${(parseInt(rowKey) + 1) + key.filterLength * key.filterIndex}`] === '') {
                                scrollToErr(`${key.field}${(parseInt(rowKey) + 1) + key.filterLength * key.filterIndex}`)
                                return true
                            }
                        }
                        else if (valid.value[`${key.field}${parseInt(rowKey) + 1}`] === '') {
                            scrollToErr(`${key.field}${parseInt(rowKey) + 1}`)
                            return true
                        }
                    }
                    else if (props.id === "1")
                        if (valid.value[`${key.field}_${parseInt(rowKey) + 1}`] === '') {
                            scrollToErr(`${key.field}_${parseInt(rowKey) + 1}`)
                            return true
                        }
                }
                break;
            case 3:

                if (valid.value[key.field].every(function (value: any) {
                    return value === "0"
                })) {
                    scrollToErr(key.field)
                    return true
                }
                break;
            case 13:

                if (valid.value[key.field] === '' && key.isMandatory) {
                    scrollToErr(key.field)
                    return true
                }

                break;
            case 7:
                if (valid.value[key.field[0]] === key.length && valid.value[key.field[1]] === '' || valid.value[key.field[0]] === 0) {
                    scrollToErr(key.field[0])
                    return true
                }
                break;
            case 14:
                for (const rowKey of key.title) {
                    if (valid.value[rowKey.field] === '' && key.isMandatory) {
                        if (key.title.length === 1) {
                            scrollToErr(rowKey.field)
                        }
                        else scrollToErr(rowKey.field.slice(0, -2))
                        return true
                    }
                    else {
                        if (key.ansType === 'float') {
                            valid.value[rowKey.field] = parseFloat(valid.value[rowKey.field])
                            console.log(valid.value[rowKey.field])
                        }
                        else valid.value[rowKey.field] = parseInt(valid.value[rowKey.field])
                    }
                }
                break;
            case 15:
                if (valid.value.ICC11_1 === "" || valid.value.ICC11_2 === "") {
                    scrollToErr("ICC11")
                    return true
                }
                break;
            case 5:
                if (date.year === '' || date.month === '') {
                    scrollToErr("age")
                    return true
                }
            default:
                {

                    if (valid.value[key.field] === '' && key.isMandatory) {
                        scrollToErr(key.field)
                        return true
                    }
                }
        }
        warning.value = ''
    }
    return false
}

const scrollToErr = (id: string) => {
    warning.value = id
    let el: any = document.getElementById(id);
    window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY, behavior: 'smooth' })

}

const warning = ref<string>('')  //出现错误的元素id
// const phoneflag = flag(600)  //移动端适配



//日期选择器

const date = reactive({ year: "", month: "" })

watch(date, () => {
    valid.value.age = date.year + '-' + date.month
})
const months = [
    { value: '01' },
    { value: '02' },
    { value: '03' },
    { value: '04' },
    { value: '05' },
    { value: '06' },
    { value: '07' },
    { value: '08' },
    { value: '09' },
    { value: '10' },
    { value: '11' },
    { value: '12' },
]
const years =
    [
        { value: '2022' },
        { value: '2021' },
        { value: '2020' },
        { value: '2019' },
        { value: '2018' },
        { value: '2017' },
        { value: '2016' },
        { value: '2015' },
        { value: '2014' },
        { value: '2013' },
        { value: '2012' },
        { value: '2011' },
        { value: '2010' },
        { value: '2009' },
        { value: '2008' },
        { value: '2007' },
        { value: '2006' },
        { value: '2005' },
        { value: '2004' },
        { value: '2003' },
        { value: '2002' },
        { value: '2001' },
        { value: '2000' },
        { value: '1999' },
        { value: '1998' },
        { value: '1997' },
        { value: '1996' },
        { value: '1995' },
        { value: '1994' },
        { value: '1993' },
        { value: '1992' },
        { value: '1991' },
        { value: '1990' }]

//获取选择器内容
const change = (value: any) => {   //value[1]是字段的key，value[0]是value
    valid.value[value[0]] = value[1][1]

}


const multiplechoice = ref({}) as any
//将多选题数组转为字符串
const ToparseInt = () => {
    for (const key of data.value.questions) {
        if (key.type === 3) {
            multiplechoice.value[key.field] = valid.value[key.field].join('')
        }
    }
}

const loading = ref<boolean>(false)

const centerDialogVisible = ref(false)
const check = () => {
    if (err()) return
    centerDialogVisible.value = true
}
const submit = async () => {   //提交问卷
    if (err()) {
        centerDialogVisible.value = false
        return
    }
    loading.value = true
    const user_id = parseInt(Cookies.get('user_id') as string)
    let school_city = Cookies.get('city')
    let school_district = Cookies.get('district')
    let obj
    if (props.id === '11' || props.id === '13') {
        obj = { school_city, school_district, user_id, stu_name: Cookies.get('username'), ...valid.value }
        await invesStudentCreate(obj).then((res: any) => {
            if (res.code === 611111) {
                ElMessage.success("问卷已提交！返回首页")
                localStorage.removeItem("questionnaireData")
                router.push({ name: 'index' })
            }
            else if (res.code === 600004) {
                ElMessage.error("提交失败，请联系管理员")
            }
            else if (res.code === 600017) {
                ElMessage.warning("问卷已提交，请勿重复提交")
            }
        })
    }
    else if (props.id === '1') {
        ToparseInt()
        obj = { school_city, school_district, user_id, ...valid.value, ...multiplechoice.value, ICC11_1: parseInt(valid.value.ICC11_1) }
        await invesTeacherCreate(obj).then((res: any) => {

            if (res.code === 611111) {
                ElMessage.success("问卷已提交！返回首页")
                localStorage.removeItem("questionnaireData")
                router.push({ name: 'index' })
            }
            else if (res.code === 600004) {
                ElMessage.error("提交失败，请联系管理员")
            }
            else if (res.code === 600017) {
                ElMessage.warning("问卷已提交，请勿重复提交")
            }

        })
    }
    loading.value = false
    centerDialogVisible.value = false
}
const disabledDate = (time: Date) => {
    return time.getTime() > Date.now()
}



</script>

<template >
    <el-button type="primary" @click="() => { router.push({ name: 'index' }) }" style="margin:20px">回到首页
    </el-button>

    <div class="body">
        <p class="title">{{ data.title }}</p>
        <div v-html="data.describe" class="describe"></div>
        <hr style="border:1 dashed #987cb9;margin:40px auto;" width="100%" color=#987cb9 SIZE=1>
        <div>
            <div v-for="(item, index) in spliceData.questions" :key="item.title">
                <!-- 填空 -->
                <div v-if="item.type === 1" class="q1" :class="{ warning_border: warning === item.field }" :id="item.field">
                    <span v-if="item.isMandatory" class="warn">*</span>
                    <stonge>{{ index + 1 }}、{{ item.title }}：</stonge>
                    <el-input v-model="valid[item.field]" :placeholder="item.ans_dec" :key="item.field" maxlength="30"
                        style="width:200px" />
                    <div v-if="warning === item.field" class="warntips">
                        <el-alert title="请输入内容" type="error" effect="dark" :closable="false" />
                    </div>
                </div>

                <!-- 单选 -->
                <div v-else-if="item.type === 2" class="q2" :id="item.field"
                    :class="{ warning_border: warning === item.field }">
                    <span v-if="item.isMandatory" class="warn">*</span>
                    <strong>{{ index + 1 }} 、{{ item.title }}</strong>
                    <div>
                        <el-radio-group v-model="valid[item.field]" style="padding:0">
                            <el-radio v-for="(ans, index) in item.ans" :label="ans">{{ item.ans_dec[index] }}</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <div v-else-if="item.type === 16" class="q2" :id="item.field"
                    :class="{ warning_border: warning === item.field }">
                    <span v-if="item.isMandatory" class="warn">*</span>
                    <strong>{{ index + 1 }} 、{{ item.title }}</strong>
                    <img :src="img" alt="">
                    <div>
                        <el-radio-group v-model="valid[item.field]" style="padding:0">
                            <el-radio v-for="(ans, index) in item.ans" :label="ans">{{ item.ans_dec[index] }}</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <!-- 多选 -->
                <div v-else-if="item.type === 3" class="q2" :id="item.field"
                    :class="{ warning_border: warning === item.field }">
                    <span v-if="item.isMandatory" class="warn">*</span>
                    <strong>{{ index + 1 }} 、{{ item.title }}</strong>
                    <div>
                        <el-radio-group style="padding:0">
                            <el-checkbox v-model="valid[item.field][index]" v-for="(ans, index) in item.ans" :label="ans"
                                true-label="1" false-label="0">{{
                                    item.ans_dec[index]
                                }}</el-checkbox>
                        </el-radio-group>
                    </div>
                </div>
                <!-- 矩阵单选 -->
                <div v-else-if="item.type === 4" class="q4">
                    <span v-if="item.isMandatory" class="warn">*</span>
                    <strong>{{ index + 1 }}、{{ item.title }}</strong>
                    <table width="100%">
                        <template v-for="(rowItem, rowIndex) in item.rowTitle" :key="rowIndex">
                            <tr>
                                <th></th>
                                <td v-for="dec in (item.ans_special ? item.ans_special : item.ans_dec)"
                                    style="font-size:12px;text-align:center;padding:10px;white-space:nowrap;border-spacing:0 2px">
                                    {{ dec }}
                                </td>
                            </tr>
                            <tr>
                                <td :id="`${item.field}${rowIndex + 1}`"
                                    :class="{ warning: warning === `${item.field}${rowIndex + 1}` }">
                                    {{ (rowIndex + 1) }}、{{ rowItem }}
                                </td>
                                <td align="center" v-for="(ans, index) in (item.ans_special ? item.ans_special : item.ans)">
                                    <el-tooltip
                                        :content="(item.ans_special ? item.ans_special[index] : item.ans_dec[index])"
                                        placement="left-start" :hide-after='0'>
                                        <el-radio-group v-if="item.filterLength"
                                            v-model="valid[`${item.field}${(rowIndex + 1) + item.filterLength * item.filterIndex}`]"
                                            style="padding:0">
                                            <el-radio :label="ans"><span></span></el-radio>
                                        </el-radio-group>
                                        <el-radio-group v-model="valid[`${item.field}${rowIndex + 1}`]" v-else
                                            style="padding:0">
                                            <el-radio :label="ans"><span></span></el-radio>
                                        </el-radio-group>
                                    </el-tooltip>
                                </td>
                            </tr>
                        </template>
                    </table>
                </div>
                <!-- 日期选择器 -->
                <div v-else-if="item.type === 5" class="q5" :class="{ warning_border: warning === item.field }"
                    :id="item.field">
                    <div class="base">
                        <span v-if="item.isMandatory" class="warn">*</span>
                        <span class="title">{{ index + 1 }} 、{{ item.title }}:</span>
                        <!-- <datePicker @child='fn' :value="valid.age" :limit="'>'" /> -->
                        <el-select style="width:80px" v-model="date.year"
                            :placeholder="valid.age.length === 7 ? valid.age.substring(0, 4) : ' '">
                            <el-option v-for="(item, index) in years" :key="index" :value="item.value">
                            </el-option>
                        </el-select>
                        <span style="margin:5px">年</span>
                        <el-select style="width:80px" v-model="date.month"
                            :placeholder="valid.age.length === 7 ? valid.age.substring(5, 7) : ' '">
                            <el-option v-for="(item, index) in months" :key="index" :value="item.value">
                            </el-option>
                        </el-select>
                        <span style="margin:5px">月</span>
                    </div>


                </div>
                <!-- 联级选择器 -->
                <div v-else-if="item.type === 6" :id="item.field" class="q6"
                    :class="{ warning_border: warning === item.field }">
                    <span v-if="item.isMandatory" class="warn">*</span>
                    <span class="title">{{ index + 1 }} 、 {{ item.title }}:</span>
                    <cascader :msg="item.field" @change="change" :placeholder="'请选择班级'" :value="valid[item.field]" />
                </div>
                <div v-else-if="item.type === 7" class="q7" :class="{ warning_border: warning === item.field[0] }"
                    :id="item.field[0]">
                    <div>
                        <span v-if="item.isMandatory" class="warn">*</span>
                        <strong>{{ index + 1 }}、{{ item.title }}</strong>
                    </div>
                    <div>
                        <el-radio-group v-model="valid[item.field[0]]" style="padding:0">
                            <el-radio v-for="(ans, index) in item.ans" :label="ans">{{ item.ans_dec[index] }}</el-radio>
                        </el-radio-group>

                    </div>
                    <div v-if="valid[item.field[0]] === item.length">
                        <el-input style="width:200px" :min="1" :max="20" :placeholder="item.ansTips"
                            v-model="valid[item.field[1]]" />
                    </div>
                </div>
                <div v-else-if="item.type === 9" class="q9" :id="item.field"
                    :class="{ warning_border: warning === item.field }">
                    <div>
                        <span v-if="item.isMandatory" class="warn">*</span>
                        <strong>{{ index + 1 }}、近两年，学校开展或获得与中小学心理健康有关的课题情况（若没有请填“0”）</strong>
                    </div>
                    <div class="content" style="margin-bottom:30px">
                        <div>
                            <span>①名称：</span>
                            <el-input style="width:200px" v-model="ICC17.ICC17_1" maxlength="50" />
                            <span>课题来源：</span>
                            <el-input style="width:200px" v-model="ICC17.ICC17_2" maxlength="50" />
                        </div>
                        <div>
                            <span>立项时间：</span>
                            <el-config-provider :locale="zhCn">
                                <el-date-picker style="width: 180px" v-model="ICC17.ICC17_3" type="date"
                                    placeholder="选择立项时间" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
                                    :disabled-date="disabledDate" />
                            </el-config-provider>
                            <span>资助金额:</span>
                            <el-input style="width:60px" oninput="value=value.replace(/[^\d]/g,'')" maxlength="7"
                                v-model="ICC17.ICC17_4" />（万元）
                        </div>

                    </div>
                    <div class="content">
                        <div>
                            <span>②名称：</span>
                            <el-input style="width:200px" v-model="ICC17.ICC17_5" maxlength="50" />
                            <span>课题来源：</span>
                            <el-input style="width:200px" v-model="ICC17.ICC17_6" maxlength="50" />
                        </div>
                        <div>
                            <span>立项时间：</span>
                            <el-config-provider :locale="zhCn">
                                <el-date-picker style="width: 180px" v-model="ICC17.ICC17_7" type="date"
                                    placeholder="选择立项时间" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
                                    :disabled-date="disabledDate" />
                            </el-config-provider>
                            <span>资助金额:</span>
                            <el-input style="width:60px" oninput="value=value.replace(/[^\d]/g,'')" maxlength="7"
                                v-model="ICC17.ICC17_8" />（万元）
                        </div>
                    </div>
                </div>
                <div v-else-if="item.type === 10" class="q11" :id="item.field"
                    :class="{ warning_border: warning === item.field }">
                    <div>
                        <span v-if="item.isMandatory" class="warn">*</span>
                        <strong> {{ index + 1 }}、上一学年中，学校开展了下列心理健康活动的情况（列举其中比较重要的活动，若没有请填“0”）：</strong>

                    </div>
                    <div>
                        <span>活动名称：</span>
                        <el-input style="width:200px" v-model="PA25.PA25_1" placeholder="请输入活动名称" />
                    </div>
                    <div>
                        <span>日期时间范围：</span>
                        <el-config-provider :locale="zhCn">
                            <el-date-picker v-model="PA25.PA25_2" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
                                range-separator="~" size="large" style="width:300px" start-placeholder="开始时间"
                                end-placeholder="结束时间" />
                        </el-config-provider>

                    </div>
                    <div>
                        <span>参与学生人数：</span>
                        <el-input style="width:200px" placeholder="请输入学生人数" oninput="value=value.replace(/[^\d]/g,'')"
                            maxlength="7" v-model="PA25.PA25_3" />

                    </div>
                </div>
                <div v-else-if="item.type === 11" class="q11" :id="item.field"
                    :class="{ warning_border: warning === item.field }">
                    <div>
                        <span v-if="item.isMandatory" class="warn">*</span>
                        <span> {{ index + 1 }}：学校心理健康教育教科书的名称是：</span>
                        <el-input style="width:200px" v-model="PA30.PA30_1" />
                    </div>
                    <div>
                        <span>出版社是：</span>
                        <el-input style="width:200px" v-model="PA30.PA30_2" />
                        （若教科书为区县或学校自编的未出版的校本教材，请在出版社处填写“自编教材”）。
                    </div>
                </div>
                <div v-else-if="item.type === 13" class="q12" :id="item.field"
                    :class="{ warning_border: warning === item.field }">
                    <span v-if="item.isMandatory" class="warn">*</span>
                    <strong> {{ index + 1 }}、{{ item.title }}</strong>

                    <el-input style="margin-top:10px" v-model="valid[item.field]" :rows="4" type="textarea" maxlength="1000"
                        :placeholder="item.ans_dec" />
                </div>
                <div v-else-if="item.type === 14" class="q14"
                    :id="item.field.length === 1 ? item.field[0] : item.field[0].slice(0, -2)"
                    :class="{ warning_border: warning === item.field[0] && item.field.length === 1 || warning === item.field[0].slice(0, -2) && item.field.length !== 1 }">
                    <span v-if="item.isMandatory" class="warn">*</span>
                    <span>{{ index + 1 }}、</span>
                    <template v-if="item.top_title">
                        <span>
                            {{ item.top_title }}
                        </span>
                        <br>
                    </template>
                    <template v-for="list in item.title">


                        <span class="left-title">{{ list.left }}</span>
                        <el-input class="input" :id="list.field" v-if="item.ansType === 'float'"
                            oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,4})?).*$/g, '$1')" maxlength="7"
                            style="width:100px;margin:0 5px" v-model="valid[list.field]" />
                        <el-input class="input" :id="list.field" v-else oninput="value =  value.replace(/[^\d]/g, '')"
                            maxlength="7" style="width:100px;margin:0 5px" v-model="valid[list.field]" />
                        <span class="right-title">{{ list.right }}</span>
                        <br v-if="list.br === true">


                    </template>

                </div>
                <div v-else-if="item.type === 15" class="q14" :id="'ICC11'"
                    :class="{ warning_border: warning === 'ICC11' }">
                    <span v-if="item.isMandatory" class="warn">*</span>
                    <span>{{ index + 1 }}、</span>

                    <span class="left-title">与学校建立固定合作转接渠道的专业心理医疗机构有</span>
                    <el-input class="input" id="ICC11_1" oninput="value=value.replace(/[^\d]/g,'')" maxlength="7"
                        style="width:100px;margin:0 5px" v-model="valid.ICC11_1" />
                    <span class="right-title">家，</span>
                    <br>
                    <span class="left-title">机构名称为：</span>
                    <el-input class="input" id="ICC11_2" style="width:100px;margin:0 5px" maxlength="50"
                        v-model="valid.ICC11_2" />
                    <span class="right-title"></span>
                </div>
            </div>
        </div>
        <div class="button">

            <el-button type="primary" v-if="spliceData.page !== 1" @click="goBack">上一页
            </el-button>

            <el-button type="primary" v-if="spliceData.page !== data.totalPage" @click="toSpliceData">下一页
            </el-button>
            <el-button type="primary" v-else @click="check()" :loading="loading">提交</el-button>
        </div>
    </div>
    <el-dialog v-model="centerDialogVisible" title="提示" width="30%" center>
        <div style="text-align:center">
            是否确认提交，一旦提交则不可再次修改！
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="centerDialogVisible = false">否</el-button>
                <el-button type="primary" @click="submit()">
                    是
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
html {
    background-color: #aaa;
}

:deep(.el-radio__label) {
    padding: 0;

}



:deep(.el-radio__input) {
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}



:deep(.el-date-editor) {
    width: 200px;
}

.warn {
    color: red;
}

.warntips {
    margin: 20px;
}

.warning_border {
    border: 1px solid red !important;
}

.warning {
    background-color: orange;
}

.body {
    width: 850px;
    margin: auto;
    margin-top: 100px;
    background-color: #fff;


    >.title {
        color: #0095ff;
        text-align: center;
        padding: 40px;
        line-height: 120px;
        font-size: 30px;
    }

    >.describe {
        padding: 0 40px;
    }

    .q1 {
        display: flex;
        align-items: center;

        margin: 20px;
        padding: 20px;

        >span {
            margin-right: 5px;
        }
    }

    .q2 {
        margin: 20px;
        padding: 20px;

        >div {
            margin: 5px;
        }
    }

    .q4 {
        margin: 20px;
        padding: 20px;

        .dec {
            text-align: right;
            margin: 10px 0;

            >span {
                margin: 0 10px;
            }
        }

        .row {
            line-height: 26px;
            position: relative;

            .rowitem {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .radio {
                    .radios {
                        margin-right: 5px;
                        width: 20px;
                    }
                }
            }


        }
    }

    .q5 {
        .base {
            display: flex;
            align-items: center;
            margin: 20px;
            padding: 20px;
            border: 1px solid #fff;

            >.title {
                margin-right: 10px;
            }
        }

    }

    .q6 {
        display: flex;
        margin: 20px;
        padding: 20px;
        align-items: center;
    }

    .q7 {
        margin: 20px;
        padding: 20px;

        >div {
            margin: 5px;
        }
    }

    .q9 {
        margin: 20px;
        padding: 20px;

        >.content {

            margin: 10px 0;
            align-items: center;

            >div {
                display: flex;
                margin: 10px 0;

                >span {
                    margin: 5px;
                }
            }

        }
    }

    .q11 {

        margin: 20px;
        padding: 20px;
        align-items: center;

        >div {
            margin: 10px 0;
        }
    }

    .q12 {
        margin: 20px;
        padding: 20px;
        align-items: center;
    }

    .q14 {
        margin: 20px;
        padding: 20px;

        span {
            line-height: 40px;
        }
    }

    .button {
        text-align: center;
        padding: 40px 0;
    }
}
</style>